<template>
  <div class="section">
    <p class="section_title">
      <span class="title">下载模板</span>
      <span class="tips">（请先下载人员名单模板，按照模板进行填写）</span>
    </p>
    <div>
      <el-button class="btnBg" type="primary" size="medium" icon="el-icon-download" @click="onExport">
        人员名单模板下载
      </el-button>
    </div>
    <p class="section_title">
      <span class="title">上传人员名单</span>
      <span class="tips">（注意请不要对模板字段进行调整）</span>
    </p>
    <div>
      <el-upload
        class="upload-demo"
        ref="Uploader1"
        name="UploaderName"
        action="#"
        :show-file-list="false"
        :auto-upload="false"
        :http-request="uploadImage"
        :limit="limit"
        :on-change="handleChange"
        :before-upload="beforeUpload"
        accept=".xls,.xlsx">
        <el-button
          class="btnBg"
          type="primary"
          size="medium"
          icon="el-icon-upload"
          :loading="loading"
          :disabled="loading">
          {{ !loading ? '上传人员名单' : '上传中...' }}
        </el-button>
      </el-upload>
      <el-alert v-if="success" title="导入成功" type="success" description="可以继续导入" show-icon></el-alert>
      <!-- <el-button class="btnBg" type="primary" :loading='loading' :disabled='loading'>{{ !loading ? '上传人员名单' : '上传中...' }}</el-button> -->
    </div>
    <div class="footer">
      <el-button class="btnBorder" size="medium" plain @click="handleCancel">取消</el-button>
      <el-button class="btnBg" size="medium" type="primary" @click="setData">确定</el-button>
    </div>
  </div>
</template>

<script>
import { batchImportAssessmentPerson, downAssessmentPersonFile } from '@apis/mzEvaluation.js'

export default {
  name: 'PeopleImport',
  props: {
    dialogVisible: Boolean,
  },
  data() {
    return {
      loading: false,
      fmData: new FormData(),
      fmAppendLength: 0,
      limit: 1,
      success: false,
    }
  },
  watch: {
    dialogVisible(newVal) {
      if (newVal) {
        this.success = false
      }
    },
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    async uploadImage(file) {
      this.fmData.append('file', file.file)
      this.loading = true
      try {
        await batchImportAssessmentPerson(this.fmData).then(res => {
          if (res.status === 200) {
            if (res.message) {
              this.$message({
                message: `${res.message}`,
                type: 'warning',
                duration: 6000,
              })
            } else {
              this.loading = false
              this.success = true
            }
          }
        })
      } catch (error) {
        this.success = false
        this.loading = false
      } finally {
        this.loading = false
        this.fmData = new FormData()
        this.$refs.Uploader1.clearFiles()
      }
    },
    handleChange(file, fileList) {
      this.$refs.Uploader1.submit()
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多只能上传${this.limit}个`)
    },
    beforeUpload(file, fileList) {
      const arr = ['.xls', '.xlsx']
      const text = ''
      const flag = arr.includes(file.name.substring(file.name.indexOf('.')))
      if (!flag) {
        this.$message({
          message: text,
          type: 'warning',
          duration: 6000,
        })
        this.fmData = new FormData()
        return false
      }
    },
    /* 导出 */
    onExport() {
      // console.log(this.checkResult);
      const req = ''
      const link = document.createElement('a')
      link.href = downAssessmentPersonFile(req)
      link.target = 'targetName'
      link.click()
    },
    setData(formName, status) {
      this.$emit('handleSuccess', false)
    },
    // 关闭
    handleCancel() {
      this.$emit('handleCancel', false)
    },
  },
}
</script>

<style lang="scss" scoped>
.section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .section_title {
    padding: 20px 0;
    .title {
      font-size: 15px;
      font-weight: 600;
    }
    .tips {
      color: #999;
    }
  }
  .footer {
    text-align: right;
    margin-top: 20px;
  }
  .el-alert {
    padding: 8px 16px;
    margin-top: 20px;
  }
}
</style>
